<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { reactive, watch } from 'vue'
import { departmentSelect } from '@/api/common'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElDatePicker,
  ElSelect,
  ElOption
} from 'element-plus'
// import { relative } from 'path'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.username = currentRow.username
    form.password = currentRow.password
    form.name = currentRow.name
    form.dept_id = currentRow.dept_id
    form.code = currentRow.code
    form.workplace = currentRow.workplace
    form.job = currentRow.job
    form.mobile = currentRow.mobile
    form.phone = currentRow.phone
    form.entrytime = currentRow.entrytime
    form.cardno = currentRow.cardno
    form.census = currentRow.census
    form.census_type = currentRow.census_type
    form.census_address = currentRow.census_address
    form.bear = currentRow.bear
    form.education = currentRow.education
    form.schooltag = currentRow.schooltag
    form.major = currentRow.major
    form.pactstart = currentRow.pactstart
    form.pactend = currentRow.pactend
    form.exigency = currentRow.exigency
    form.exigency_mobile = currentRow.exigency_mobile
    form.bank = currentRow.bank
    form.bankno = currentRow.bankno
    form.remark = currentRow.remark
    form.social_security = currentRow.social_security
    form.social_security_time = currentRow.social_security_time
    form.insuredtime = currentRow.insuredtime
    form.gender = currentRow.gender
    form.birth = currentRow.birth
    form.address = currentRow.address
    form.politics = currentRow.politics
    form.marital = currentRow.marital
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  username: '',
  password: '',
  name: '',
  dept_id: '',
  code: '',
  workplace: '',
  job: '',
  mobile: '',
  phone: '',
  birth: '',
  entrytime: '',
  cardno: '',
  gender: '',
  census: '',
  census_type: '',
  census_address: '',
  address: '',
  politics: '',
  marital: '',
  bear: '',
  education: '',
  schooltag: '',
  major: '',
  pactstart: '',
  pactend: '',
  exigency: '',
  exigency_mobile: '',
  bank: '',
  bankno: '',
  remark: '',
  social_security: '',
  social_security_time: '',
  insuredtime: ''
})

// 部门-下拉选择
const departmentArr: any = reactive([])
const getDepartmentSelect = async () => {
  // let goodsTypeArr: any = []
  let res: any = await departmentSelect({})
  res.data.list.forEach((item) => {
    departmentArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getDepartmentSelect()

// 性别 - 下拉选择
const sexArr: any = reactive([
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 0
  }
])

// 户籍 - 下拉选择
const censusArr: any = reactive([
  {
    label: '农业户口',
    value: 0
  },
  {
    label: '非农业户口',
    value: 1
  }
])

// 是否 - 下拉选择
const truefalsArr: any = reactive([
  {
    label: '是',
    value: 1
  },
  {
    label: '否',
    value: 0
  }
])

defineExpose({
  getFormData: () => {
    return form
  }
})
</script>

<template>
  <ElForm :model="form" label-width="auto">
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('descriptionsDemo.username')">
          <ElInput v-model="form.username" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('login.password')">
          <ElInput v-model="form.password" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('staff.staffFullName')">
          <ElInput v-model="form.name" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('staff.staffNumber')">
          <ElInput v-model="form.code" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('formZD.department')">
          <ElSelect v-model="form.dept_id" filterable :placeholder="t('common.inputText')">
            <ElOption
              v-for="item in departmentArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('formZD.workLocation')">
          <ElInput v-model="form.workplace" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.post')">
          <ElInput v-model="form.job" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('descriptionsDemo.phone')">
          <ElInput v-model="form.mobile" />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.workPhone')">
          <ElInput v-model="form.phone" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.dataOfBirth')">
          <ElDatePicker
            v-model="form.birth"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('common.selectText')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('staff.entryTime')">
          <ElDatePicker
            v-model="form.entrytime"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('common.selectText')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('staff.IDNo')">
          <ElInput v-model="form.cardno" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.gender')">
          <ElSelect v-model="form.gender" filterable :placeholder="t('common.selectText')">
            <ElOption
              v-for="item in sexArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.registeredResidence')">
          <ElInput v-model="form.census" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="120px"
          :label="t('personnelManagementemp.natureOfRegisteredResidence')"
        >
          <ElSelect v-model="form.census_type" filterable :placeholder="t('common.selectText')">
            <ElOption
              v-for="item in censusArr"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="120px"
          :label="t('personnelManagementemp.registeredResidenceAddress')"
        >
          <ElInput v-model="form.census_address" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.firstResidenceAddress')">
          <ElInput v-model="form.address" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.politicalOutlook')">
          <ElInput v-model="form.politics" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.maritalStatus')">
          <ElInput v-model="form.marital" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.fertilityStatus')">
          <ElInput v-model="form.bear" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.educationing')">
          <ElInput v-model="form.education" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.education')">
          <ElInput v-model="form.schooltag" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.majorStudied')">
          <ElInput v-model="form.major" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.contractStartTime')">
          <ElDatePicker
            v-model="form.pactstart"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('common.selectText')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.contractDeadline')">
          <ElDatePicker
            v-model="form.pactend"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('common.selectText')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.emergencyContact')">
          <ElInput v-model="form.exigency" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.emergencyContactPhone')">
          <ElInput v-model="form.exigency_mobile" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.bank')">
          <ElInput v-model="form.bank" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.bankAccout')">
          <ElInput v-model="form.bankno" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.notes')">
          <ElInput v-model="form.remark" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="120px"
          :label="t('personnelManagementemp.whetherToPaySocialSecurity')"
        >
          <ElSelect v-model="form.social_security" filterable :placeholder="t('common.selectText')">
            <ElOption
              v-for="item in truefalsArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="120px"
          :label="t('personnelManagementemp.paymentTimeOfSocialSecurity')"
        >
          <ElDatePicker
            v-model="form.social_security_time"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('common.selectText')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('personnelManagementemp.insurancePeriod')">
          <ElDatePicker
            v-model="form.insuredtime"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="t('common.selectText')"
            :shortcuts="[
              {
                text: '今天',
                value: new Date()
              }
            ]"
          />
        </ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less"></style>
